<template>
    <div class="notice">
        <div class="header">
            <van-nav-bar title="通知中心" left-arrow @click-left="handleLeft" />
        </div>
        <div class="product_list_serch-text">
            <searchHome v-model:value="searchValue" placeholder="请输入关键字进行检索" @onSubmit="onSearch"
                @screenIsShow_on="handleListFlag" />
        </div>
        <div class="mongolian_layer" v-show="showTop">
            <div class="mongolian_layer_options">
                <div class="mongolian_layer_div">
                    <div class="title">{{ switchIndex == 0 ? '待办类型' : '通知类型' }}</div>
                    <div class="shelf_type">
                        <div v-for="item in getWarehousingList()" :key="item.value" @click="warehousingClick(item)"
                            :class="warehousingIndex !== item.value ? 'shelf_div' : 'shelf_div_avtive'">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="title">通知时间</div>
                    <div class="date_shelf">
                        <div v-for="(item, index) in dataList" :key="index" class="date_shelf_div" @click="datePicker">
                            <van-image :src="complement" class="menu_cions" />
                            <div class="title">{{ computPlace(item, index) }}</div>
                        </div>
                        <div class="div">至</div>
                    </div>
                </div>
                <div class="buttons">
                    <div class="reset" @click="reset">重置</div>
                    <div class="submit" @click="submit">完成</div>
                </div>
            </div>
        </div>
        <div class="switch_tab">
            <div class="switch_tab_content">
                <div :class="switchIndex == index ? 'switch_tab_div_active' : 'switch_tab_div'"
                    v-for="(item, index) in switchList" :key="index" @click="switchClick(index)">
                    {{ item.name }}
                    <span v-show="index == 0 && item.number !== 0">({{ item.number }})</span>
                    <span v-show="index == 1 && switchIndex !== index && item.number !== 0" class="circle"></span>
                </div>
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <div class="notice_content">
                    <NewsListItem v-for="item in list" :key="item.code" :data="item" :switchIndex="switchIndex"
                        @read="read" @look="onLook" />
                </div>
            </van-list>
        </van-pull-refresh>
        <van-calendar v-model:show="pickerShow" type="range" @confirm="onConfirm" :allow-same-day="true"
            :min-date="minDate" :max-date="maxDate" ref="calendarRef" />
        <LookIndex ref="LookIndexRef" @onRefresh="onRefresh" />
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { getEnvValue } from "@/utils/index";
import { useRouter, useRoute } from 'vue-router'
import { queryDeptMsg, queryDeptCount } from '@/api/operation/index'
import NewsListItem from './components/newsListItem/index.vue'
import searchHome from '@/views/productHome/productLists/components/searchHome/index.vue'
import LookIndex from './components/look/index.vue'
const complement = new URL("@/assets/productHome/icon_riqi.png", import.meta.url).href;
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const route = useRoute()
const router = useRouter()
const LookIndexRef = ref()
const calendarRef = ref()
// 关键字
const searchValue = ref('')
// 筛选
const showTop = ref(false)
// 通知类型index
const warehousingIndex = ref()
// 运营代办
const operationDbList = ref<any>([
    { name: '借调待办', value: '3' },
])
// 运营通知
const operationTzList = ref<any>([
    { name: '系统公告', value: '2' },
    { name: '借调通知', value: '4' },
    { name: '借调撤销', value: '5' },
])
// 产品代办
const productDbList = ref<any>([
    { name: '入库待办', value: '8' },
    { name: '变价待办', value: '7' },
])
// 产品通知
const productTzList = ref<any>([
    { name: '过期提醒', value: '1' },
    { name: '系统公告', value: '2' },
    { name: '借调信息', value: '6' },
])
// 通知时间
const dataList = ref([
    '起始时间', '结束时间'
])
// 日期展示
const pickerShow = ref(false)
// 开始时间
const startTime = ref()
// 结束时间
const endTime = ref()
// 自定义日期范围
const minDate = new Date('2010/01/01')
const maxDate = new Date('2050/12/31')
// switch检索
const switchList = ref([
    { name: '待办', number: 0 },
    { name: '通知', number: 0 }
])
// switch下标
const switchIndex = ref(0)
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    context: '',
    startTime: '',
    endTime: '',
    configCode: '',
})
// 列表
const refreshing = ref(false);
const loading = ref(false);
const loadingBox = ref(false)
const finished = ref(false);
const list = ref<any[]>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

onMounted(() => {
    if (!route.query.dept) {
        if (route.query.type === '招商部') {
            switchIndex.value = 1
        }
    }
})

const getWarehousingList = () => {
    if (route.query.type === '运营部' && switchIndex.value == 0) {
        return operationDbList.value
    } else if (route.query.type === '运营部' && switchIndex.value == 1) {
        return operationTzList.value
    } if (route.query.type === '选品官' && switchIndex.value == 0) {
        return operationDbList.value
    } else if (route.query.type === '选品官' && switchIndex.value == 1) {
        return operationTzList.value
    } else if (route.query.type === '产品部' && switchIndex.value == 0) {
        return productDbList.value
    } else if (route.query.type === '产品部' && switchIndex.value == 1) {
        return productTzList.value
    } else if (route.query.type === '招商部' && switchIndex.value == 0) {
        return productDbList.value
    } else if (route.query.type === '招商部' && switchIndex.value == 1) {
        return productTzList.value
    }
}

/** 关键字搜索 */
const onSearch = () => {
    queryParams.value.context = searchValue.value;
    onRefresh()
}
/** 通知类型点击 */
const warehousingClick = (item: any) => {
    warehousingIndex.value = warehousingIndex.value == item.value ? undefined : item.value
}
/** 筛选 */
const handleListFlag = () => {
    showTop.value = !showTop.value
}
/** 通知时间点击事件 */
const datePicker = () => {
    pickerShow.value = true
}
/** 日期回显 */
const computPlace = (item: string, index: number) => {
    if (index == 0) {
        if (startTime.value) {
            return startTime.value
        } else {
            return item
        }
    } else if (index == 1) {
        if (endTime.value) {
            return endTime.value
        } else {
            return item
        }
    }
}
const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
/** 日期选择 */
const onConfirm = (values) => {
    const [start, end] = values;
    pickerShow.value = false
    startTime.value = formatDate(start)
    endTime.value = formatDate(end)
}
/** 重置 */
const reset = () => {
    startTime.value = undefined
    endTime.value = undefined
    warehousingIndex.value = undefined
    calendarRef.value?.reset();
    queryParams.value = {
        pageNum: 1,
        pageSize: 10,
        context: '',
        startTime: '',
        endTime: '',
        configCode: '',
    }
}
/** 完成 */
const submit = () => {
    // 日期
    queryParams.value.startTime = startTime.value
    queryParams.value.endTime = endTime.value
    queryParams.value.configCode = warehousingIndex.value
    showTop.value = false
    onRefresh();
}
/** 回退 */
const handleLeft = () => {
    if (route.query.type === '运营部') {
        router.push('/operation/operateMine')
    } else if (route.query.type === '产品部') {
        router.push('/productHome/productMine')
    } else if (route.query.type === '研发部') {
        router.push('/research/mine')
    } else if (route.query.type === '选品官') {
        router.push('/selection/selectionOperateMine')
    } else {
        router.push('/home/profile')
    }
}

/** 查询列表 */
const getList = async () => {
    loadingBox.value = true
    try {
        loading.value = true
        getMessageNumber()
        const res = await queryDeptMsg({ ...queryParams.value, type: switchIndex.value })

        if (res) {
            for (let index = 0; index < res.rows.length; index++) {
                if (res.rows[index].productImage) {
                    const real_src = res.rows[index].productImage.split(",");
                    res.rows[index].productImage = getEnvValue("VITE_APP_PIC_URL") + real_src[0]
                }
            }
            refreFlag.value = true
            // 空数据 停止加载
            if (res.rows.length == 0) {
                list.value = [];
                finished.value = true;
                loadingBox.value = false
                loading.value = false;
                return;
            }
            // 有数据 赋值列表 加载状态结束
            res.rows.forEach((item) => {
                finished.value = false;
                list.value.push(item);
            });
            loadingBox.value = false
            loading.value = false;
            refreshing.value = false;
            // 如果list长度大于等于总数据条数，数据全部加载完成
            if (list.value.length >= res.total) {
                finished.value = true; //结束加载
            }
        } else {
            loadingBox.value = false
            loading.value = false;
            finished.value = true;
        }
    } catch (error) {
        loadingBox.value = false
    }

};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;

        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
// tabs切换
const switchClick = (index) => {
    switchIndex.value = index
    reset()
    searchValue.value = ''
    onRefresh()
}
// 运营部消息统计
const getQueryDeptCount = async () => {
    const { data = {} } = await queryDeptCount({})
    switchList.value[0].number = data?.waitCount || 0
    switchList.value[1].number = data?.readCount || 0
}
const getMessageNumber = () => {
    getQueryDeptCount()
    // route.query.type === '运营部'
}
const onLook = (data: any) => {
    LookIndexRef.value.open(data)
}
// 手动清楚数据中的消息已读状态
const read = (key: string, code: string) => {
    let index = list.value.findIndex((item: any) => {
        return item.code === code
    })
    if (index != -1) {
        list.value[index][key] = 1
    }
    getQueryDeptCount()
}
/** 
 * 区分待办通知跳转不同页面
 * 1 待办
 * 2 通知
 * */
watch(() => route.query.dept, (v: any) => {
    if (v) {
        switchIndex.value = v - 1
        reset()
        searchValue.value = ''
        onRefresh()
    }
}, { immediate: true })
</script>
<script lang="ts">
export default { name: 'notice' }
</script>
<style lang="less" scoped>
:deep(.van-calendar__popup) {
    height: 82%;
}

.notice {
    width: 100%;
    height: 100vh;
    background: #F6FAFF;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 34px;
        margin-bottom: 10px;
        padding-top: 10px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 10px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 90%;
            height: 34px;
            position: relative;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_serch2 {
            display: flex;
            width: 30px;
            justify-content: center;
            align-items: center;

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
                position: absolute;
                top: 14px;
                left: 66%;
            }
        }
    }

    .mongolian_layer {
        width: 100%;
        height: calc(100vh - 144px);
        position: absolute;
        z-index: 6001;
        background: rgba(0, 0, 0, .5);

        .mongolian_layer_options {
            width: 100%;
            max-height: 300px;
            background: #FFFFFF;
            display: flex;
            flex-flow: column;
            padding-bottom: 20px;
            box-sizing: border-box;

            .mongolian_layer_div {
                width: 100%;
                overflow: auto;
                background: #FFFFFF;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                padding: 15px 15px 0 15px;
                box-sizing: border-box;
                align-content: flex-start;

                .title {
                    width: 100%;
                }

                .shelf_type {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    .shelf_div {
                        width: 78px;
                        height: 30px;
                        border-radius: 15px;
                        border: 1px solid #B8BECA;
                        font-weight: 400;
                        font-size: 14px;
                        color: #B8BECA;
                        text-align: center;
                        line-height: 30px;
                        box-sizing: border-box;
                        margin-right: 5px;
                    }

                    .shelf_div_avtive {
                        width: 78px;
                        height: 30px;
                        border-radius: 15px;
                        background: #0094FF;
                        font-weight: 400;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        line-height: 30px;
                        margin-right: 5px;
                    }
                }

                .date_shelf {
                    width: 100%;
                    height: 34px;
                    display: flex;
                    position: relative;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    .date_shelf_div {
                        width: 159px;
                        height: 34px;
                        border-radius: 17px;
                        border: 1px solid #B8BECA;
                        position: relative;
                        text-align: center;
                        line-height: 34px;

                        .menu_cions {
                            position: absolute;
                            width: 14px;
                            height: 14px;
                            top: 10px;
                            left: 15px;
                        }

                        .title {
                            font-weight: 400;
                            font-size: 14px;
                            color: #B8BECA;
                        }
                    }

                    .div {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .buttons {
                width: 100%;
                height: 44px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                padding: 0 15px;

                .reset {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #0094FF;
                }

                .submit {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    background: #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }

    .switch_tab {
        width: 100%;
        height: 44px;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;

        .switch_tab_content {
            width: 208px;
            height: 35px;
            background: #E1EEFF;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;



            .switch_tab_div {
                width: 50%;
                text-align: center;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                height: 35px;
                line-height: 35px;
                position: relative;

                .circle {
                    width: 6px;
                    height: 6px;
                    background: #FC2540;
                    display: inline-block;
                    border-radius: 50%;
                    position: absolute;
                    top: 6px;
                }
            }

            .switch_tab_div_active {
                width: 50%;
                text-align: center;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                background: linear-gradient(270deg, #0064FF 0%, #008FFF 100%);
                border-radius: 16px;
                height: 35px;
                line-height: 35px;
            }
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 200px);
        overflow: scroll;
    }


}
</style>